<template>
  <div class="page-container middle-padding Example">
    <h1>使用antdVue组件</h1>
    <a-button type="success">Success</a-button>

    <h1>使用vue-router</h1>
    <a-button type="primary" @click="toPage('/about')">去关于页</a-button>
    <span class="middle-margin">当前路由{{route.path}}</span>

    <h1>使用Pinia</h1>
    <a-button type="primary" ghost @click="mainStore.increment(2)">更新count</a-button>
    <span class="middle-margin">state中count数据: {{ mainStore.count }}</span>

    <h1>内置常用scss变量颜色</h1>
    <div class="flex-row">
      <span class="colorBlock flex-column-center" v-for="(item, index) in themeList" :key="index">
        <div :class="['showBlock', item.className]"></div>
        {{ item.text }}
      </span>
    </div>

  </div>
</template>
  
<script lang='ts' setup>
import { reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useMainStore } from '@/store';
import { storeToRefs } from 'pinia';

// pinia mainStore
const mainStore = useMainStore()


console.log(mainStore.count);
mainStore.increment(2)
const route = useRoute()
const router = useRouter()

const toPage = (path: string) => {
  router.push(path) 
}

let themeList = reactive([
  { text: '成功颜色', className: 'success-bg' },
  { text: '警告颜色', className: 'warning-bg' },
  { text: '错误颜色', className: 'error-bg' },
  { text: '默认颜色', className: 'primary-bg' },
  { text: '次要颜色', className: 'secondary-bg' },
  { text: '默认颜色', className: 'default-bg' },
  { text: '紫色主题', className: 'purple-bg' },
  { text: '蓝色主题', className: 'blue-bg' },
  { text: '绿色主题', className: 'green-bg' },
  { text: '橙色主题', className: 'orange-bg' },
  { text: '黄色主题', className: 'yellow-bg' },
  { text: '粉色主题', className: 'pink-bg' },
  { text: '红色主题', className: 'red-bg' },
  { text: '暗黑主题', className: 'dark-bg' },
])







</script>
  

<style lang='scss' scoped>
.Example{ 
  h1{
    margin: 10px 0px;
  }
  .colorBlock{
    width: 80px;
    height: 80px;

    
  }
  .showBlock{
    width: 20px;
    height: 20px;
  }
  
}
</style>
  